import { Modal, Input, message } from "antd";
import { useState, useEffect } from "react";

const RenameModal = (props) => {
  const [originFileName, setOriginFileName] = useState("");
  const [fileName, setFileName] = useState("");

  const handleInputChange = (e) => {
    setFileName(e.target.value);
  };
  const handleOk = async () => {
    if (!fileName) {
        return message.error("文件名不能为空");
    }
    if (originFileName === fileName) {
        return message.error("文件名没有发生变更");
    }
    const record = props.record;
    const params = {
      id: record?._id,
      path: record?.path,
      isFolder: record?.isFolder,
      name: fileName,
    };
    console.log('params', params)
  
    props.onOk(params);
  };
  const handleCancel = () => {
    props.setOpen(false);
  };

  useEffect(() => {
    if (props.isOpenRenameModal) {
      const fileName = props.record?.fileInfo?.fileName;
      console.log('props.record', props.record)
      setOriginFileName(fileName);
      setFileName(fileName);
    } else {
      setFileName("");
    }
  }, [props.isOpenRenameModal]);

  return (
    <Modal
      title={props.title}
      open={props.isOpenRenameModal}
      onOk={handleOk}
      onCancel={handleCancel}
      okText="确认更改"
      cancelText="取消"
    >
      <div style={{ marginBottom: "10px" }}>文件名：</div>
      <Input
        placeholder="请输入文件(夹)名"
        value={fileName}
        onChange={handleInputChange}
      />
    </Modal>
  );
};
export default RenameModal;
